<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/payment.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="plugins/font-awesome-4.7.0/css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="js/jquery.js"/>
        <title>饿了么 在线支付</title>
		<script type="text/javascript">
			$(function(){
				//获取食品分类
				$.ajax({
					type:"GET",
					url:"http://192.168.150.202:8080/Api/foodTypes",
					success:function(responseData){
						 
						responseData = responseData.rows;
						var $ul = $("div.banner > ul");
						for(var i=0;i<responseData.length;i++){
							var item = responseData[i];
							var $li = $("<li id='"+item.id+"'><img src='./icon/"+item.icon+"'>"+item.name+"</li>");
						    $li.appendTo($ul);
						}
					}
				});
				
		</script>
    </head>
    <body>
        <div class="wrapper">
            <!-- header部分 -->
            <header>
                <p>在线支付</p>
            </header>
            <!-- 订单信息部分 -->
            <h3>订单信息：</h3>
            <div class="order-info">
                <p>
                    万家饺子（软件园E18店）
                    <i class="fa fa-caret-down" id="showBtn"></i>
                </p>
                <p>&#165;49</p>
            </div>
            <!-- 订单明细部分 -->
            <ul class="order-detailet" id="detailetBox">
                <li>
                    <p>四川菜 x 2</p>
                    <p>&#165;15</p>
                </li>
                <li>
                    <p>鲜肉 x 1</p>
                    <p>&#165;16</p>
                </li>
                <li>
                    <p>配送费</p>
                    <p>&#165;3</p>
                </li>
            </ul>
            <!-- 支付方式部分 -->
            <ul class="payment-type">
                <li>
                    <img src="img/b4.jpg">
                    <i class="fa fa-check-circle"></i>
                </li>
                <li>
                    <img src="img/b2.jpg">
					<i class="fa fa-check-circle"></i>
                </li>
            </ul>
            <div class="payment-button">
                <button>确认支付</button>
            </div>
            <!-- 底部菜单部分 -->
            
        </div> 
		<div class="footer">
			<ul>
				<a href="index.html"><li><i class="fa fa-home"></i>首页</li></a>
				<a href="shop.html"><li><i class="fa fa-chrome"></i>店铺</li></a>
				<a href="order.html"><li><i class="fa fa-tasks"></i>订单</li></a>
				<a href="mine.html"><li><i class="fa fa-user-o"></i>我的</li></a>
			</ul>
		</div>
    </body>
</html>
